<template>
	<view class="content">
		<!-- <view class="top" :style="{ height: `${rect.top + rect.height + 25}px` }">
			<view class="wrapper" :style="{ height: `${rect.height}px`, top: `${rect.top}px` }">
				<view class="back" :style="{ top: `${(rect.height - 24)/2}px` }">
					<image class="back-icon" src="https://snpl.scgjcx.com/static/back.png" @tap="onBack"></image>
				</view>
				<view class="nav">
					{{ stationName }}
				</view>
			</view>
		</view> -->
	
		
		
		<view class="container">
			<view class="list">
				<template v-if="deviceList.length > 0">
					<Item v-for="device in deviceList" :key="device.id" :device="device" @toggle="toggle" />
				</template>
				<template v-else>
					<view class="empty">主机为空</view>
				</template>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="close">
					<uni-icons type="closeempty" size="20" color="#fff" @click="onClosePopup"></uni-icons>
				</view>
				<view class="logout-top">
					<image class="time-icon" src="https://snpl.scgjcx.com/static/time.png"></image>
					<text>工作时长设置</text>
				</view>
				<view class="form">
					<view class="form-tip">
						<text>工作时长</text>
						<input v-model="duration" type='number' class="input" />
						<text>分钟</text>
					</view>
					<button class="logout" @click="() => control(controlRow, true)">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { request } from '@/util/request.js';
	import Item from './item.vue';
	export default {
		components: { Item },
		data() {
			return {
				rect: {},
				stationName: '',
				deviceId: 0,
				stationId: 0,
				stationNo: '',
				deviceList: [],
				duration: 30,
				controlRow: {},
				deviceOnline: false,
			}
		},
		onLoad(option) {
			this.rect = uni.getStorageSync('rect');
			this.stationName = option.name;
			this.deviceId = option.device - 0;
			this.stationId = option.station - 0;
			this.stationNo = option.no;
			this.deviceOnline = option.online === 'true';
			console.log(option);
			uni.setNavigationBarTitle({
				title: option.name
			})
		},
		onShow() {
			this.loadDeviceList();
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			loadDeviceList() {
				request({
					path: '/channel/page',
					method: 'post',
					data: { station: this.stationId, pageNo: 1, pageSize: 10000 },
					success: ({ data }) => {
						if (data.code === 0) {
							this.deviceList = data.data.data.filter(it => it.no === this.stationNo);
						}
						console.log("主机的信息",data);
					}
				});
			},
			onClosePopup() {
				this.$refs.popup.close();
			},
			toggle(row) {
				if (!this.deviceOnline) {
					uni.showToast({
						title: '设备已离线',
						duration:2000,
						icon:"error"
					});
					return;
				}
				console.log(row);
				if (row.workingStatus) {
					this.control(row, false);
				} else {
					request({
						path: '/dashboard/config',
						method: 'get',
						success: ({ data }) => {
							if (data.code === 0) {
								const duration = data.data.value - 0;
								this.duration = duration;
							}
							this.controlRow = row;
							this.$refs.popup.open('center');
						}
					})
				}
			},
			control(channel, status) {
				const body = {
					device: this.deviceId,
					deviceName: this.stationName,
					channel: channel.id,
					channelName: channel.name,
					duration: this.duration - 0,
					no: channel.no,
					port: channel.port,
					type: 'wechat',
					status: status
				};
				console.log(body, channel);
				request({
					path: '/control-device',
					method: 'post',
					data: body,
					success: ({ data }) => {
						if (data.code === 0) {
							const rtIndex = this.deviceList.findIndex(it => it.id === body.channel);
							if (rtIndex !== -1) {
								const rt = this.deviceList[rtIndex];
								rt.workingStatus = status;
								this.$set(this.deviceList, rtIndex, rt);
							}
						}
						if (status) {
							this.onClosePopup();
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		
		.top {
			width: 100%;
			box-sizing: border-box;
			background-image: url('https://snpl.scgjcx.com/static/bg1.png');
			
			.wrapper {
				width: 100%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.back {
					position: absolute;
					left: 0;
					.back-icon {
						width: 51px;
						height: 25px;
						display: block;
					}
				}
				.nav {
					text-align: center;
					color: #fff;
				}
			}
			
		}
		
		.container {
			width: 100%;
			flex: 1;
			box-sizing: border-box;
			padding-bottom: 20px;
			background-color: rgb(235, 235, 235);
			position: relative;
			overflow: hidden;
			
			.list {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 10px;
				overflow: auto;
			}
			
			.empty {
				height: 200px;
				line-height: 200px;
				text-align: center;
				color: darkgrey;
				background-color: #fff;
				border-radius: 10px;
			}
			
		}
		
		
		.popup-content {
			width: 75vw;
			border-radius: 15px;
			background-color: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			
			.close {
				text-align: right;
				position: absolute;
				top: 5px;
				right: 10px;
				color: #fff;
				z-index: 10;
			}
			
			.logout-top {
				height: 80px;
				box-sizing: border-box;
				background-color: rgb(75, 102, 207);
				background-image: url('https://snpl.scgjcx.com/static/cloud.png');
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				
				.time-icon {
					width: 50px;
					height: 50px;
					position: absolute;
					left: 20px;
				}
			}
			
			.form {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				padding: 20px 20px 30px;
				background-color: #fff;
				
				.form-tip {
					box-sizing: border-box;
					padding: 20px 15px 40px;
					color: rgb(186, 186, 186);
					display: flex;
					align-items: center;
					.input {
						width: 80px;
						height: 22px;
						margin: 0 10px;
						padding: 5px;
						border-radius: 5px;
						border: solid 1px rgb(186, 186, 186);
					}
				}
				
				.logout {
					background-color: rgb(74, 100, 205);
					border-radius: 20px;
					color: #fff;
				}
			}
		}
		
	}
</style>
